{% extends 'base.html' %}
{% from 'bootstrap5/pagination.html' import render_pagination %}
{% from 'bootstrap5/form.html' import render_form %}
{% from 'macros.html' import photo_card with context %}

{% block title %}{{ tag.name }}{% endblock %}

{% block content %}
<div class="page-header">
  <h1>#{{ tag.name }}
    <small class="text-muted fs-6">{{ tag.photos_count }} photos</small>
    {% if current_user.can('MODERATE') %}
    <a class="btn btn-danger btn-sm" href="{{ url_for('admin.delete_tag', tag_id=tag.id) }}"
      onclick="return confirm('Are you sure?')">
      Delete
    </a>
    {% endif %}
    <span class="dropdown">
      <button class="btn btn-secondary btn-sm" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        Order by {{ order_rule }} {{ render_icon('chevron-expand') }}
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        {% if order_rule == 'collections' %}
        <a class="dropdown-item" href="{{ url_for('.show_tag', tag_id=tag.id, order_rule='time') }}">
          Order by time
        </a>
        {% else %}
        <a class="dropdown-item" href="{{ url_for('.show_tag', tag_id=tag.id, order_rule='collections') }}">
          Order by collections
        </a>
        {% endif %}
      </div>
    </span>
  </h1>
</div>
<div class="row">
  {% for photo in photos %}
  {{ photo_card(photo) }}
  {% endfor %}
</div>
<div class="page-footer">
  {{ render_pagination(pagination, align='center') }}
</div>
{% endblock %}
